<template>
  <div>
        <!--头部-->
      <Head :head="head" @greet="greet"></Head>
      <el-dialog
          :visible.sync="centerDialogVisible"
          width="1000px"
          center>
          <div class="left_essential base">
            <img src="/static/assets/img/dtx1.png" alt="">
            <p v-for="(c,index) in cs" @click="sorts($event, index, c.t)" v-bind:class="{'visible3':nowIndex == index}" :key="c.index">{{ c.name }}</p>
          </div>
          <div class="right_essential" v-if="temp1 == 1">
            <p>尊敬的{{user}}用户，胸痛质控大家庭感谢您的加入</p>
            <div><p><span>组织</span></p><p><span>个人资料</span></p></div>
            <div><p><span>头像</span><img src="/static/assets/img/logo.png" alt=""></p><p><span>姓名</span>{{user}}</p><p><span>头像</span><img src="/static/assets/img/dtx.png" alt=""></p></div>
            <div><p><span>权限</span>{{user}}</p><p><span>权限</span>{{user}}</p></div>
            <div><p><span>简称</span>{{user}}</p><p><span>职务</span>{{user}}</p><p><span>科室</span>{{user}}></p></div>
            <div><p></p><p><span>手机</span>{{user}}<span class="tip">已绑定</span></p><p><span>邮箱</span>{{user}}<span class="tip">已验证</span></p></div>
          </div>
          <div class="right_essential" v-if="temp1 == 2">
            <p>您的安全服务</p>
            <div><p><span class="width_user">用户名</span>{{user}}</p></div>
            <div><p><span>绑定邮箱</span></p><span class="tip2">修改邮箱</span></div>
            <div><p><span>绑定手机</span>{{user}}</p></div>
            <div><p><span>登录密码</span>{{user}}</p><span class="tip2">修改邮箱</span></div>
          </div>
          <div class="both"></div>
        </el-dialog>
        <!--内容-->
    <el-container>
        <el-container class="right_bgcolor">
          <div class="bgcolor" style="width: 100%;">
            <!--菜单-->
            <left-top :active="3"></left-top>
          <el-main>
            <div class="main_left">
              <div style="height: 25px;margin: 10px auto 10px;width: 300px;">
               <el-col v-for="(c,index) in details" style="width: 100px;" :key="(c,index).index">
                  <div class="ct">
                    <span class="detail"  v-on:click="ranking($event, index, c.t)" v-bind:class="{'visible3':nowIndex1 == index}">
                      {{ c.name }}
                    </span>
                  </div>
               </el-col>
              </div>
              <div class="main_right" v-if="tempe == 1">
                <div class="" style="height: 50px;margin-right: 1%;margin-top: -10px">
                  <!--<img v-for="img in images" :src="tempa?img.src:img.src1" alt="" v-on:click="qh(img.t)" class="fr" :key="img.index">-->
                  <el-form ref="form" :model="form" class="fr version">
                    <p class="fr" style="margin-top: 10px"><span style="margin-right:5px">仅通过认证</span><el-checkbox v-model="checked"></el-checkbox></p>
                    <el-select v-model="form.region" placeholder="标准版" class="aaaa">
                      <el-option label="标准版" value="1"></el-option>
                      <hr>
                      <el-option label="基层版-PCI" value="2"></el-option>
                      <hr>
                      <el-option label="基层版-溶柱" value="3"></el-option>
                      <hr>
                      <el-option label="基层版-转运" value="4"></el-option>
                    </el-select>
                  </el-form>
                </div>
                <el-form ref="form" :model="form1">
                  <div style="width:43%;float: left;border-right: 1px solid #ddd">
                     <el-row>
                      <el-col :span="2" class="bettew_top">地区1</el-col>
                      <el-col :span="4">
                        <el-select v-model="form1.quer" placeholder="江苏省" class="bbb none_black">
                          <el-option label="江苏省" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="4">
                        <el-select v-model="form1.quer" placeholder="苏州" class="none_black bbb">
                          <el-option label="苏州" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="10">
                        <el-select v-model="form1.quer" placeholder="苏州大学附属第一人民医院" class="none_black bbb">
                          <el-option label="苏州大学附属第一人民医院" value="1"></el-option>
                        </el-select>
                      </el-col>
                    <el-col :span="2" class="bettew_top">
                      <img src="/static/assets/img/out.png" alt="">
                    </el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="2" class="bettew_top">地区2</el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="江苏省" class="none_black bbb">
                        <el-option label="江苏省" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="苏州" class="none_black bbb">
                        <el-option label="苏州" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-select v-model="form1.quer" placeholder="苏州大学附属第一人民医院" class="none_black bbb">
                        <el-option label="苏州大学附属第一人民医院" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="2" class="bettew_top" @click="removeItem(this)">
                      <img src="/static/assets/img/out.png" alt="">
                    </el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="2" class="bettew_top">地区3</el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="江苏省" class="none_black bbb">
                        <el-option label="江苏省" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="南京" class="none_black bbb">
                        <el-option label="南京" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-select v-model="form1.quer" placeholder="南京第一人民医院" class="none_black bbb">
                        <el-option label="南京第一人民医院" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="2" class="bettew_top">
                      <img src="/static/assets/img/out.png" alt="">
                    </el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="2" class="bettew_top">地区4</el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="江苏省" class="none_black bbb">
                        <el-option label="江苏省" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="无锡" class="none_black bbb">
                        <el-option label="无锡" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-select v-model="form1.quer" placeholder="无锡人民医院" class="none_black bbb">
                        <el-option label="无锡人民医院" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="2" class="bettew_top">
                      <img src="/static/assets/img/out.png" alt="">
                    </el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="2" class="bettew_top">地区5</el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="江苏省" class="none_black bbb">
                        <el-option label="江苏省" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="4">
                      <el-select v-model="form1.quer" placeholder="连云港" class="none_black bbb">
                        <el-option label="连云港" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-select v-model="form1.quer" placeholder="苏州人民医院" class="none_black bbb">
                        <el-option label="苏州人民医院" value="1"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="2" class="bettew_top">
                      <img src="/static/assets/img/out.png" alt="">
                    </el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="2" class="bettew_top">地区6</el-col>
                    <el-col :span="2" class="bettew_top">
                      <img src="/static/assets/img/add.png" alt="">
                    </el-col>
                  </el-row>
                  </div>
                  <div style="width:52%;float: left;padding-left:6%;">
                    <el-row >
                      <el-col :span="3" class="bettew_top">时间1</el-col>
                      <el-col :span="6">
                        <el-select v-model="form1.quer" placeholder="2017一季度" class="none_black bbb">
                          <el-option label="2017一季度" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3" class="bettew_top">时间7</el-col>
                      <el-col :span="6" class="bettew_top">
                        <img src="/static/assets/img/add.png" alt="">
                      </el-col>
                    </el-row>
                    <el-row >
                      <el-col :span="3" class="bettew_top">时间2</el-col>
                      <el-col :span="6">
                        <el-select v-model="form1.quer" placeholder="2017二季度" class="none_black bbb">
                          <el-option label="2017一季度" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3" class="bettew_top">时间8</el-col>
                      <el-col :span="6" class="bettew_top">
                        <img src="/static/assets/img/add.png" alt="">
                      </el-col>
                    </el-row>
                    <el-row >
                      <el-col :span="3" class="bettew_top">时间3</el-col>
                      <el-col :span="6">
                        <el-select v-model="form1.quer" placeholder="2017三季度" class="none_black bbb">
                          <el-option label="2017一季度" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3" class="bettew_top">时间9</el-col>
                      <el-col :span="6" class="bettew_top">
                        <img src="/static/assets/img/add.png" alt="">
                      </el-col>
                    </el-row>
                    <el-row >
                      <el-col :span="3" class="bettew_top">时间4</el-col>
                      <el-col :span="6" class="bettew_top">
                        <el-select v-model="form1.quer" placeholder="2017上半年" class="none_black bbb">
                          <el-option label="2017一季度" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3" class="bettew_top">时间10</el-col>
                      <el-col :span="6" class="bettew_top">
                        <img src="/static/assets/img/add.png" alt="">
                      </el-col>
                    </el-row>
                    <el-row >
                      <el-col :span="3" class="bettew_top">时间5</el-col>
                      <el-col :span="6">
                        <el-select v-model="form1.quer" placeholder="2017下半年" class="none_black bbb">
                          <el-option label="2017一季度" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3" class="bettew_top">时间11</el-col>
                      <el-col :span="6" class="bettew_top">
                        <img src="/static/assets/img/add.png" alt="">
                      </el-col>
                    </el-row>
                    <el-row >
                      <el-col :span="3" class="bettew_top">时间6</el-col>
                      <el-col :span="6">
                        <el-select v-model="form1.quer" placeholder="2017整年" class="none_black bbb">
                          <el-option label="2017一季度" value="1"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3" class="bettew_top">时间12</el-col>
                      <el-col :span="6" class="bettew_top">
                        <img src="/static/assets/img/add.png" alt="">
                      </el-col>
                      <el-col :span="4" class="bettew_top tr">
                        <button type="button" class="btn" @click="toggles">确定</button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form >
                <div class="both"></div>
                <div v-show="isShow">
                  <img src="/static/assets/img/1.png" alt="">
                </div>
              </div>
             <div class="main_right" v-if="tempe == 2">
                <div class="" style="height: 50px;margin-right: 1%;margin-top: -10px">
                 <!--<img v-for="img in images" :src="tempa?img.src:img.src1" alt="" v-on:click="qh(img.t)" class="fr" :key="img.index">-->
                 <el-form ref="form" :model="form" class="fr version">
                   <p class="fr" style="margin-top: 10px"><span style="margin-right:5px">仅通过认证</span><el-checkbox v-model="checked"></el-checkbox></p>
                   <el-select class="aaaa" v-model="form.region" placeholder="标准版" @change="pass($event)">
                     <el-option label="标准版" value="1"></el-option>
                     <hr>
                     <el-option label="基层版-PCI" value="2"></el-option>
                     <hr>
                     <el-option label="基层版-溶柱" value="3"></el-option>
                     <hr>
                     <el-option label="基层版-转运" value="4"></el-option>
                   </el-select>
                   <div class="position-relative width-23 top_qi">
                     <div @click="showAverage = !showAverage" class="clearfix full-width">
                       <div class="fr text-white">
                         <i class="el-icon-arrow-down el-icon--right rotate" :class="{'rotate-180':showAverage}"></i>
                       </div>
                       <div class="fr" :class="{'text-white': choosedAverage.type}">{{choosedText}}</div>
                     </div>
                     <div class="sub-tip" :class="{'sub-tip-show':showAverage}"></div>
                     <transition name="el-zoom-in-top">
                       <div class="bg-white of-hidden sub-card" v-show="showAverage">
                         <div class="border-bottom" v-for="(item,i) in averages" :key="i">
                           <div class="px-10 text-14 text-black-light py-7">
                             <div class="d-flex"
                                  :class="{'pt-7': j !== 0}"
                                  v-for="(subItem,j) in item.content" :key="j">
                               <div class="width-8" :class="{'line-height-40':subItem.type === 'year' || subItem.type === 'freeAverage'}">
                                 {{subItem.title}}
                               </div>
                               <div class="flex-full flex-wrap d-flex"
                                    :class="{'border-bottom pb-7': j !== item.content.length - 1}">
                                 <div v-for="(sub,k) in subItem.subs" :key="k"
                                      class="mr-5 cursor-pointer position-relative" :class="{'choosedColor': check(sub,subItem,item)}">
                                   <div v-if="subItem.type === 'year'">
                                     {{sub.name}}
                                     <el-date-picker
                                       class="height-2"
                                       v-model="sub.value"
                                       type="year"
                                       :clearable="false"
                                       value-format="yyyy"
                                       @change="choose(sub,subItem,item)"
                                       prefix-icon="el-icon-arrow-down">
                                     </el-date-picker>
                                   </div>
                                   <div v-else-if="subItem.type === 'freeAverage'">
                                     <span class="mr-5">{{sub.label}}</span>
                                     <span :class="{'choosedColor': choosedAverage.type === 3}">{{sub.name}}</span>
                                     <el-date-picker
                                       class="width-4 height-2"
                                       v-model="sub.value"
                                       type="month"
                                       :clearable="false"
                                       value-format="yyyy年MM月"
                                       @change="choose(sub,subItem,item)"
                                       prefix-icon="el-icon-arrow-down">
                                     </el-date-picker>
                                   </div>
                                   <div v-else @click.stop="choose(sub,subItem,item)">
                                     {{sub.name}}
                                   </div>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </transition>
                   </div>
                 </el-form>
               </div>
                <model :models="models" v-if="temp_a"></model>
                <pci :pcis="pcis" v-if="!temp_a"></pci>
             </div>
              <div class="main_right" v-if="tempe == 3">
                <div class="" style="height: 50px;margin-right: 1%;margin-top: -10px">
                  <!--<img v-for="img in images" :src="tempa?img.src:img.src1" alt="" v-on:click="qh(img.t)" class="fr" :key="img.index">-->
                  <el-form ref="form" :model="form" class="fr version">
                    <p class="fr" style="margin-top: 10px"><span style="margin-right:5px">仅通过认证</span><el-checkbox v-model="checked"></el-checkbox></p>
                    <el-select class="aaaa" v-model="form.region" placeholder="标准版">
                      <el-option label="标准版" value="1"></el-option>
                      <hr>
                      <el-option label="基层版-PCI" value="2"></el-option>
                      <hr>
                      <el-option label="基层版-溶柱" value="3"></el-option>
                      <hr>
                      <el-option label="基层版-转运" value="4"></el-option>
                    </el-select>
                    <div class="position-relative width-23 top_qi">
                      <div @click="showAverage = !showAverage" class="clearfix full-width">
                        <div class="fr text-white">
                          <i class="el-icon-arrow-down el-icon--right rotate" :class="{'rotate-180':showAverage}"></i>
                        </div>
                        <div class="fr" :class="{'text-white': choosedAverage.type}">{{choosedText}}</div>
                      </div>
                      <div class="sub-tip" :class="{'sub-tip-show':showAverage}"></div>
                      <transition name="el-zoom-in-top">
                        <div class="bg-white of-hidden sub-card" v-show="showAverage">
                          <div class="border-bottom" v-for="(item,i) in averages" :key="i">
                            <div class="px-10 text-14 text-black-light py-7">
                              <div class="d-flex"
                                   :class="{'pt-7': j !== 0}"
                                   v-for="(subItem,j) in item.content" :key="j">
                                <div class="width-8" :class="{'line-height-40':subItem.type === 'year' || subItem.type === 'freeAverage'}">
                                  {{subItem.title}}
                                </div>
                                <div class="flex-full flex-wrap d-flex"
                                     :class="{'border-bottom pb-7': j !== item.content.length - 1}">
                                  <div v-for="(sub,k) in subItem.subs" :key="k"
                                       class="mr-5 cursor-pointer position-relative" :class="{'choosedColor': check(sub,subItem,item)}">
                                    <div v-if="subItem.type === 'year'">
                                      {{sub.name}}
                                      <el-date-picker
                                        class="height-2"
                                        v-model="sub.value"
                                        type="year"
                                        :clearable="false"
                                        value-format="yyyy"
                                        @change="choose(sub,subItem,item)"
                                        prefix-icon="el-icon-arrow-down">
                                      </el-date-picker>
                                    </div>
                                    <div v-else-if="subItem.type === 'freeAverage'">
                                      <span class="mr-5">{{sub.label}}</span>
                                      <span :class="{'choosedColor': choosedAverage.type === 3}">{{sub.name}}</span>
                                      <el-date-picker
                                        class="width-4 height-2"
                                        v-model="sub.value"
                                        type="month"
                                        :clearable="false"
                                        value-format="yyyy年MM月"
                                        @change="choose(sub,subItem,item)"
                                        prefix-icon="el-icon-arrow-down">
                                      </el-date-picker>
                                    </div>
                                    <div v-else @click.stop="choose(sub,subItem,item)">
                                      {{sub.name}}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </transition>
                    </div>
                  </el-form>
                </div>
                <el-row>
                  <el-col :span="1">时间</el-col>
                  <el-col :span="3">
                    2017年01月
                  </el-col>
                  <el-col :span="1">至</el-col>
                  <el-col :span="3">
                    2017年01月
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="1" class="bettew_top">地区1</el-col>
                  <el-col :span="2">
                    <el-select v-model="form1.quer" placeholder="江苏省" class="none_black bbb">
                      <el-option label="江苏省" value="1"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="2">
                    <el-select v-model="form1.quer" placeholder="苏州" class="none_black bbb">
                      <el-option label="苏州" value="1"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="form1.quer" placeholder="苏州大学附属第一人民医院" class="none_black bbb">
                      <el-option label="苏州大学附属第一人民医院" value="1"></el-option>
                    </el-select>
                  </el-col>
                  <el-col v-if="tempss" :span="2" class="bettew_top">
                    <img src="/static/assets/img/add.png" @click="check_show(false)" alt="">
                    <button type="button" class="btn" @click="togs">确定</button>
                  </el-col>
                </el-row>
                <el-row v-if="!tempss">
                <el-col :span="1" class="bettew_top">地区2</el-col>
                <el-col :span="2">
                  <el-select v-model="form1.quer" placeholder="苏州" class="none_black bbb">
                    <el-option label="苏州" value="1"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="2">
                  <el-select v-model="form1.quer" placeholder="" class="none_black bbb">
                    <el-option label="" value="1"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="form1.quer" placeholder="" class="none_black bbb">
                    <el-option label="" value="1"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="2" class="bettew_top">
                  <img src="/static/assets/img/add.png" alt="">
                  <button type="button" class="btn" @click="togs">确定</button>
                </el-col>
              </el-row>
                <div v-show="isow">
                  <img src="/static/assets/img/2.png" alt="">
                </div>
              </div>
            </div>
          </el-main>
          </div>
        </el-container>
    </el-container>

    <!--添加查询条件项-->
    <script id="query-add" type="text/template">
      <el-row>
        <el-col :span="1" class="bettew_top">地区1</el-col>
        <el-col :span="2">
          <el-select v-model="form1.quer" placeholder="江苏省" class="none_black">
            <el-option label="江苏省" value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="form1.quer" placeholder="苏州" class="none_black">
            <el-option label="苏州" value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="form1.quer" placeholder="苏州大学附属第一人民医院" class="none_black">
            <el-option label="苏州大学附属第一人民医院" value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" class="bettew_top">
          <img src="/static/assets/img/add.png" alt="">
          <button type="button" class="btn" @click="togs">确定</button>
        </el-col>
      </el-row>
    </script>
  </div>
</template>

<script>
import api from '../api.js'
import model from '@/components/model'
import pci from '@/components/pci'
import Table from '@/components/Table'
import Head from '@/components/Head'
import LeftTop from '@/components/Left'
import _ from 'lodash'
export default {
  data () {
    return {
      head: {
        platform: '江苏省胸痛中心质控管理平台',
        analysis: '指标分析',
        name: '李冰冰 ',
        methods: 'greet'
      },
      tempss: true,
      checked: true,
      isShow: false,
      isow: false,
      temp: true,
      tempa: true,
      temp_a: true,
      showAverage: false,
      user: '543759843@qq.com',
      centerDialogVisible: false,
      nowIndex: 0,
      temp1: 1,
      tempe: 2,
      nowIndex1: 1,
      details: [
        {name: 'PK', t: 1},
        {name: '排名', t: 2},
        {name: '查询', t: 3}
      ],
      cs: [
        {name: '账户资料', t: 1},
        {name: '安全设置', t: 2}
      ],
      images: [
        {src: '/static/assets/img/plus.png', src1: '/static/assets/img/plus1.png', t: true},
        {src: '/static/assets/img/reduce.png', src1: '/static/assets/img/reduce1.png', t: false}
      ],
      form: {
        region: '',
        date: '',
        value5: ''
      },
      form1: {
        quer: ''
      },
      models: [
        {
          name: '1 STEMI患者症状到首次医疗接触（S2FMC）时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '13', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '3', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '25', ranking: '全国平均'}
          ]
        },
        {
          name: '2 首次医疗接触至首份心电图（FMC2ECG）时间',
          // src: '/static/assets/img/zan.png',
          link: [
            {class: 'bettew', class1: 'time_color', time: '45', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '5', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '33', ranking: '全国平均'}
          ]
        },
        {
          name: '3 ECG远程传输比例',
          link: [
            {class: 'bettew', class1: 'time_color', time: '20', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '8', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '40', ranking: '全国平均'}
          ]
        },
        {
          name: '4 首次医疗接触至导丝通过的时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '16', ranking: '全国排名'},
            {class: 'cent', class1: 'ranking_color', time: '7', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '14', ranking: '全国平均'}
          ]
        },
        {
          name: '5 首次医疗接触至双重抗血小板治疗时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '29', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '10', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '35', ranking: '全国平均'}
          ]
        },
        {
          name: '6 直达导管室比例：绕行急诊及CCU',
          link: [
            {class: 'bettew', class1: 'time_color', time: '38', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '6', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '26', ranking: '全国平均'}
          ]
        },
        {
          name: '7 非PCI医院停留时间（DIDO）',
          // src: '/static/assets/img/zan.png',
          link: [
            {class: 'bettew', class1: 'time_color', time: '36', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '18', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '14', ranking: '全国平均'}
          ]
        },
        {
          name: '8 D2B时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '36', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '19', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '47', ranking: '全国平均'}
          ]
        },
        {
          name: '9 再灌注比例',
          link: [
            {class: 'bettew', class1: 'time_color', time: '60', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '9', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '32', ranking: '全国平均'}
          ]
        },
        {
          name: '10 院内死亡率 （心源性及非心源性）',
          link: [
            {class: 'bettew', class1: 'time_color', time: '13', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '15', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '17', ranking: '全国平均'}
          ]
        },
        {
          name: '11 出院带药符合指南推荐',
          link: [
            {class: 'bettew', class1: 'time_color', time: '46', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '14', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '34', ranking: '全国平均'}
          ]
        },
        {
          name: '12 质量改进会、上传会议记录和照片',
          link: [
            {class: 'bettew', class1: 'time_color', time: '21', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '7', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '37', ranking: '全国平均'}
          ]
        },
        {
          name: '13 数据填报量',
          link: [
            {class: 'bettew', class1: 'time_color', time: '35', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '5', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '46', ranking: '全国平均'}
          ]
        },
        {
          name: '14 急诊PCI例数',
          link: [
            {class: 'bettew', class1: 'time_color', time: '54', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '7', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '65', ranking: '全国平均'}
          ]
        }
      ],
      pcis: [
        {
          name: '1 STEMI患者症状到首次医疗接触时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '13', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '3', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '25', ranking: '全国平均'}
          ]
        },
        {
          name: '2 首次医疗接触至首份心电图时间',
          // src: '/static/assets/img/zan.png',
          link: [
            {class: 'bettew', class1: 'time_color', time: '45', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '5', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '33', ranking: '全国平均'}
          ]
        },
        {
          name: '3 ECG远程传输比例',
          link: [
            {class: 'bettew', class1: 'time_color', time: '20', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '8', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '40', ranking: '全国平均'}
          ]
        },
        {
          name: '4 首次医疗接触至双重抗血小板治疗时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '16', ranking: '全国排名'},
            {class: 'cent', class1: 'ranking_color', time: '7', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '14', ranking: '全国平均'}
          ]
        },
        {
          name: '5 再灌注比例',
          link: [
            {class: 'bettew', class1: 'time_color', time: '29', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '10', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '35', ranking: '全国平均'}
          ]
        },
        {
          name: '6 1A 非PCI医院停留时间（DIDO）',
          link: [
            {class: 'bettew', class1: 'time_color', time: '38', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '6', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '26', ranking: '全国平均'}
          ]
        },
        {
          name: '7 1B 直达导管室比率、绕行急诊及CCU',
          // src: '/static/assets/img/zan.png',
          link: [
            {class: 'bettew', class1: 'time_color', time: '36', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '18', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '14', ranking: '全国平均'}
          ]
        },
        {
          name: '8 1C D2B时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '36', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '19', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '47', ranking: '全国平均'}
          ]
        },
        {
          name: '9 1D 首次医疗接触至导丝通过时间',
          link: [
            {class: 'bettew', class1: 'time_color', time: '60', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '9', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '32', ranking: '全国平均'}
          ]
        },
        {
          name: '10 院内死亡率（心源性及非心源性）',
          link: [
            {class: 'bettew', class1: 'time_color', time: '13', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '15', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '17', ranking: '全国平均'}
          ]
        },
        {
          name: '11 出院带药符合指南推荐',
          link: [
            {class: 'bettew', class1: 'time_color', time: '46', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '14', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '34', ranking: '全国平均'}
          ]
        },
        {
          name: '12 质量改进会、上传会议记录和照片',
          link: [
            {class: 'bettew', class1: 'time_color', time: '21', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '7', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '37', ranking: '全国平均'}
          ]
        },
        {
          name: '13 数据填报量',
          link: [
            {class: 'bettew', class1: 'time_color', time: '35', ranking: '全省排名'},
            {class: 'cent', class1: 'ranking_color', time: '5', ranking: '全国排名'},
            {class: 'bettew', class1: 'time_color1', time: '46', ranking: '全国平均'}
          ]
        }
      ],
      // 表格头部
      cols: [
        { value: '指标' },
        { value: '本省平均' },
        { value: '全国平均' },
        { value: '全国排名' }
      ],
      // 表格内容
      tableData: [
        [
          {value: '1  STMEMI患者症状到首次医疗接触'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#1086FD;'}
        ], [
          {value: '2  首次医疗接触至首份心电图时间'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '3  ECG远程传输比例'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '4  STEMI患者首份ECG至确诊时间'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;', src: '/static/assets/img/zan.png'}
        ], [
          {value: '5  STEMI患者首次医疗接触至双重抗'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '6  直达导管室比率'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '7  非PCI医院停留时间'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '8  D2B时间'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '9  对于溶栓治疗者D2N时间'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '10  即可血管再通率'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '11  ACS患者24小时强化他汀治疗比例'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '12  β受体阻滞剂比例'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '13  院内死亡率 （不支持排名、PK）'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '14  出院带药符合指南推荐'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ], [
          {value: '15  质量改进会'},
          {value: '王小虎', color: 'color: #D53BDE'},
          {value: '15分钟', color: 'color: #8D3FDA;'},
          {value: '5', color: 'color:#E54E62;'}
        ]
      ],
      averages: [
        {
          type: 1,
          content: [
            {
              title: '年份',
              type: 'year',
              subs: [
                {
                  name: '请选择',
                  value: ''
                }
              ]
            },
            {
              title: '年平均',
              type: 'range',
              subs: [
                {
                  name: '整年',
                  value: 'all'
                }
              ]
            },
            {
              title: '半年平均',
              type: 'range',
              subs: [
                {
                  name: '上半年',
                  value: 'firstHalf'
                },
                {
                  name: '下半年',
                  value: 'secondHalf'
                }
              ]
            },
            {
              title: '季度平均',
              type: 'range',
              subs: [
                {
                  name: '一季度',
                  value: 'quarterOne'
                },
                {
                  name: '二季度',
                  value: 'quarterTwo'
                },
                {
                  name: '三季度',
                  value: 'quarterThree'
                },
                {
                  name: '四季度',
                  value: 'quarterFour'
                }
              ]
            },
            {
              title: '月平均',
              type: 'range',
              subs: [
                {
                  name: '1月',
                  value: 'jan'
                },
                {
                  name: '2月',
                  value: 'feb'
                },
                {
                  name: '3月',
                  value: 'mar'
                },
                {
                  name: '4月',
                  value: 'apr'
                },
                {
                  name: '5月',
                  value: 'may'
                },
                {
                  name: '6月',
                  value: 'jun'
                },
                {
                  name: '7月',
                  value: 'jul'
                },
                {
                  name: '8月',
                  value: 'aug'
                },
                {
                  name: '9月',
                  value: 'sep'
                },
                {
                  name: '10月',
                  value: 'oct'
                },
                {
                  name: '11月',
                  value: 'nov'
                },
                {
                  name: '12月',
                  value: 'Dec'
                }
              ]
            }
          ],
          choosedValue: []
        },
        {
          type: 2,
          content: [
            {
              title: '累计平均',
              type: 'sum',
              subs: [
                {
                  name: '累计至今',
                  value: 'now'
                }
              ]
            }
          ],
          choosedValue: []
        },
        {
          type: 3,
          content: [
            {
              title: '自由平均',
              type: 'freeAverage',
              subs: [
                {
                  label: '起始',
                  name: '请选择',
                  value: ''
                },
                {
                  label: '至',
                  name: '请选择',
                  value: ''
                }
              ]
            }
          ],
          choosedValue: []
        }
      ],
      choosedAverage: {}
    }
  },
  components: {
    model,
    pci,
    Table,
    Head,
    LeftTop
  },
  mounted () {
    api.getAvg('S2FMC', '本省平均值', '2018-01', '2018-01')
      .then(res => {
        console.log(res)
      })
    api.getRank('S2FMC', '2018-01', '2018-01')
      .then(res => {
        console.log(res)
      })
  },
  methods: {
    toggles: function () {
      this.isShow = true
    },
    togs: function () {
      this.isow = true
    },
    greet: function () {
      this.centerDialogVisible = true
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    qh: function (t) {
      this.tempa = t
      this.temp = t
    },
    ranking: function (event, index, t) {
      this.nowIndex1 = index
      this.tempe = t
    },
    sorts (event, index, t) {
      this.nowIndex = index
      this.temp1 = t
    },
    choose (sub, fparent, sparent) {
      if (fparent.type === 'year' || fparent.type === 'freeAverage') {
        sub.name = sub.value
      }
      this.choosedAverage = sparent
      let index = _.findIndex(sparent.choosedValue, {type: fparent.type})
      if (index === -1) {
        let obj = {
          type: fparent.type,
          value: sub.value,
          name: sub.name
        }
        sparent.choosedValue.push(obj)
      } else {
        sparent.choosedValue[index].value = sub.value
        sparent.choosedValue[index].name = sub.name
      }
      // 清空未选择项
      this.averages.forEach(item => {
        if (item.type !== this.choosedAverage.type) {
          item.choosedValue = []
          item.content.forEach(subItem => {
            if (subItem.type === 'year' || subItem.type === 'freeAverage') {
              subItem.subs.forEach(sub => {
                sub.value = ''
              })
            }
          })
        }
      })
    },
    check (sub, fparent, sparent) {
      if (fparent.type !== 'freeAverage') {
        if (_.findIndex(sparent.choosedValue, {type: fparent.type}) > -1) {
          return sparent.choosedValue[_.findIndex(sparent.choosedValue, {type: fparent.type})].value === sub.value
        }
        return false
      }
    },
    removeItem: function (that) {
      $(that).parent().remove()
    },
    check_show: function (str) {
      this.tempss = str
    },
    pass: function (e) {
      if (e === '1') {
        this.temp_a = true
      } else if (e === '2') {
        this.temp_a = false
      }
    }
  },
  computed: {
    'choosedText' () {
      let result = ''
      if (!this.choosedAverage.type) {
        result = '请选择'
      } else {
        if (this.choosedAverage.choosedValue[0].type !== 'year') {
          _.reverse(this.choosedAverage.choosedValue)
        }
        if (this.choosedAverage.type === 3) {
          this.choosedAverage.content[0].subs.forEach(item => {
            result += item.label + ' ' + item.value + ' '
          })
        } else {
          this.choosedAverage.choosedValue.forEach(item => {
            result += item.name + '  '
          })
        }
      }
      return result
    }
  }
}
</script>

<style scoped>
  /*布局样式*/
  .el-header, .el-footer {
    height: 120px!important;
    color:#fff;
    background:url(../../static/assets/img/titlebg.png) no-repeat center center;
  }
  .el-aside {
    background-color: #f9f9f9;
    color: #fff;
    text-align: center;
    line-height: 200px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    -moz-box-shadow: rgb(167, 168, 169) 2px 0px 12px;/* 老的 Firefox */
    box-shadow: rgb(167, 168, 169) 2px 0px 12px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  /*左侧导航的高度*/
  .el-menu-item, .el-submenu__title{
    height:100px;
    line-height: 30px;
    padding-top: 20px;
  }
  /*导航选中状态*/
 li.el-menu-item.is-active {
    color:#0F86FC!important;
    background-color:#F1EBE1!important;
 }
.el-menu-item[data-v-a6d97536], .el-submenu__title[data-v-a6d97536]{
  background-color:#F1EBE1!important;
  color:#808080!important;
}
.top_qi{
  line-height: 37px;
}
.right_bgcolor{
  padding: 20px 20px 20px 0;
  background-color: #f2f2f2;
}
  .right_bottom div{
    margin-top: 50px;
    line-height: 25px;
  }
  /*标题*/
  .grad h1{
    float: left;
    line-height: 60px;
    color: #ffff;
    font-size: 25px;
  }
  /*右边图标*/
  .grad img{
    margin-left: 30px;
    margin-top: 38px;
  }
  /*版本 时间点击弹出事件*/
  .version{
    display: inline-flex;
    float: right
  }
  hr{color:#f2f2f2}
  .sub-card{
    position: absolute;
    z-index: 100;
    top: 80px;
    height: 392px;
    width: 480px;
    right: 0;
    line-height: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
  }
  .sub-tip{
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 0px solid white;
    transition: border-bottom-width 120ms ease-out;
  }
  .btn{
    border:1px solid #fff;
    color:#fff;
    background-color: #1086FD;
    width: 70px;
    height: 30px;
    border-radius: 25px;
  }
  .rotate{
    transition: transform .3s;
  }
  .none_black{
    border-bottom: 1px solid #ddd;
    margin-right: 5px;
  }
  .bgcolor{
    background-color: #fff;
  }
  .detail{
    background: #CCCCCC;
    width: 70px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
  }
  .bettew_top{
    line-height: 40px;
  }
  .visible3{
    color: #fff;
    background-color:#1186FC ;
  }
  .el-main{
    margin-left: 9%;
    min-height: 1000px;
  }
  .choosedColor{
    color: #1186FC;
  }
</style>
